<template>
  <div class="home-box">
    <div class="user-num-box">
      <div class="el-cols-title-box">
        <i class="el-icon-s-data" style="color:#909399;font-size:22px;margin-right:4px;"></i>
        <span class="el-cols-title">用户数据</span>
      </div>
      <div class="user-num-item">
        <div class="user-num-item-in">
          <div class="el-cols-item-name">用户总数</div>
          <div class="el-cols-item-num-all">
            <countTo :startVal="0" :endVal="10575" :duration="1000"></countTo>
          </div>
        </div>
        <div class="user-num-item-in">
          <div class="el-cols-item-name">实际贷款用户</div>
          <div class="el-cols-item-num-real">
            <countTo :startVal="0" :endVal="1621" :duration="1000"></countTo>
          </div>
        </div>
        <div class="user-num-item-in">
          <div class="el-cols-item-name">演示用户</div>
          <div class="el-cols-item-num-test">
            <countTo :startVal="0" :endVal="46" :duration="1000"></countTo>
          </div>
        </div>
      </div>
    </div>
    <div class="el-rows">
      <div class="el-cols-l">
        <div class="el-cols-title-box">
          <i class="el-icon-s-help" style="color:#909399;font-size:22px;margin-right:4px;"></i>
          <span class="el-cols-title">去兜底数据</span>
        </div>
        <div class="el-cols-item">
          <div class="el-cols-item-in">
            <div class="el-cols-item-name">成功转去兜底</div>
            <div class="el-cols-item-num">
              <countTo :startVal="0" :endVal="696 " :duration="1000"></countTo>
            </div>
          </div>
          <div class="el-cols-item-in">
            <div class="el-cols-item-name">失败转去兜底</div>
            <div class="el-cols-item-num">
              <countTo :startVal="0" :endVal=" 2" :duration="1000"></countTo>
            </div>
          </div>
          <div class="el-cols-item-in">
            <div class="el-cols-item-name">留待转去兜底</div>
            <div class="el-cols-item-num">
              <countTo :startVal="0" :endVal="47" :duration="1000"></countTo>
            </div>
          </div>
          <div class="el-cols-item-in">
            <div class="el-cols-item-name">限制转去兜底</div>
            <div class="el-cols-item-num">
              <countTo :startVal="0" :endVal="53" :duration="1000"></countTo>
            </div>
          </div>
        </div>
      </div>
      <div class="el-cols-r">
        <div class="el-cols-title-box">
          <i class="el-icon-s-order" style="color:#909399;font-size:22px;margin-right:4px;"></i>
          <span class="el-cols-title">申请统计</span>
        </div>
        <div class="credit-satatus-box">
          <div class="credit-satatus-item" v-for="(item,index) in processData" :key="index">
            <div class="credit-satatus-progress">
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="item.percentage"
                :color="item.color"
              ></el-progress>
            </div>
            <div class="credit-satatus-item-num">{{item.value}}（{{item.status}}）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import countTo from "vue-count-to";
export default {
  components: { countTo },
  data() {
    return {
      processData: [
        {
          percentage: 50,
          color: "#000000",
          status: "未申请",
          value: 5288
        },
        {
          percentage: 1,
          color: "#1E9FFF",
          status: "申请中",
          value: 3
        },
        {
          percentage: 8,
          color: "#c2c2c2",
          status: "申请失败",
          value: 884
        },
        {
          percentage: 14,
          color: "#009688",
          status: "申请成功",
          value: 1486
        },
        {
          percentage: 9,
          color: "#393D49",
          status: "留待查看",
          value: 1004
        },
        {
          percentage: 4,
          color: "#5FB878",
          status: "预授信成功",
          value: 496
        },
        {
          percentage: 6,
          color: "#FFB800",
          status: "预授信失败",
          value: 616
        }
      ]
    };
  },
  methods: {}
};
</script>
<style scoped>
.home-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.user-num-box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 15px;
}
.user-num-item {
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
}
.user-num-item-in {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.el-rows {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.el-cols-l {
  width: 30%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
}
.el-cols-r {
  width: 69%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
}
.el-cols-title-box {
  display: flex;
  align-items: center;
}
.el-cols-title {
  font-size: 16px;
  color: #666;
}
.el-cols-item {
  display: flex;
  flex-wrap: wrap;
}
.el-cols-item-in {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.el-cols-item-name {
  font-size: 14px;
  color: #666;
  padding: 35px 0;
}
.el-cols-item-num {
  font-size: 32px;
  color: #e6a23c;
  font-style: italic;
}
.el-cols-item-num-all {
  font-size: 40px;
  color: #409eff;
  font-style: italic;
}
.el-cols-item-num-real {
  font-size: 40px;
  color: #67c23a;
  font-style: italic;
}
.el-cols-item-num-test {
  font-size: 40px;
  color: #909399;
  font-style: italic;
}
.credit-satatus-box {
  margin: 15px 0;
}
.credit-satatus-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.credit-satatus-progress {
  width: 75%;
  margin-right: 10px;
}
.credit-satatus-item-num {
  font-size: 15px;
  color: #909399;
  font-style: italic;
}

</style>